<template>
     <div class="Categories">
        <div class="item" v-for="(item,index) in categories" :key="index">
          <img :src="item.pictureUrl" alt="">
           <div>{{ item.title }}</div>
        </div>
     </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import useHomeStore from "../../../stores/modules/homeStore";
import {ref,watch} from 'vue'

//获取数据
const store = useHomeStore();
const categories = ref([]);
watch(() =>store.Categories,(newData) => {
    categories.value = newData;
    console.log(categories.value);
})
 

</script>

<style lang="less" scoped>
.Categories
{
    display: flex;
    justify-content: space-around;
    flex: 1;
    flex-shrink: 0;
    overflow-x:auto;
    //隐藏滚动条
    &::-webkit-scrollbar
    {
        display: none;
    }

    .item{
        margin-top:10px;
        margin-left: 25px;
        font-size: 10px;
        text-align: center;
        img
        {
           width: 40px;
        }
    }
}

</style>